<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>记事本</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			功能：增加，删除，统计，清空，隐藏
			<h2>记事本</h2>
			<button type="button" @click="clear">清空</button>
			<!-- <button type="button" @click="clear">隐藏</button> -->
			<input v-model="inputValue" placeholder="请输入任务" @keyup.enter="add"/><br />
			<p v-for="(item,index) in list">
				{{index+1+' : '+item}}
				<button type="button" @click="remove(index)">删除</button>
			</p>
			<!-- 长度看统计，就是一共有多少个  0个时候隐藏 -->
			<span v-show="list.length != 0">共{{list.length}}个</span>
			
			
			
		</div>
		
		<script type="text/javascript">
			var app = new Vue({
				el: "#app",
				data:{
					list:["写代码","吃饭","睡觉"],
					inputValue:"好好学习，天天向上",
					
				},
				methods:{
					add:function(){
						this.list.push(this.inputValue)
					},
					remove:function(index){
						console.log("删除");
						console.log(index);
						// index开始下标,1代表在后面删除几个
						this.list.splice(index,1);
					},
					clear:function(){
						this.list = []
					},
					
					
				}
			})
		</script>
	</body>
</html>
